<template>
  <div>
    <div class="margin-container-list">
      <el-tabs v-model="selectStatus" @tab-click="selectStatusClick">
        <el-tab-pane label="已选微客" name="1"></el-tab-pane>
        <el-tab-pane label="未选微客" name="0"></el-tab-pane>
      </el-tabs>
      <!--顶部搜索 -->
      <div class="top-operate">
        <div>
          <el-select v-model="keywordType" placeholder="请选择" style="width: 120px">
            <el-option v-for="item in keywordTypes" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-input v-model="keyword" placeholder="请输入搜索内容" class="width-300"></el-input>
          <el-button-group class="mar-l-10">
            <el-button type="primary" @click="handleSearch()">查询</el-button>
            <el-button @click="resetSearch()">重置</el-button>
          </el-button-group>
        </div>
      </div>
      <div class="pad-t-15 pad-b-15 font-14 v-align-c">
        <el-checkbox class="mar-l-14 mar-r-0" v-model="allChecked" @change="selectAll"><span
            class="mar-l-20">当页全选</span></el-checkbox>
        <span class="pad-l-4 pad-r-4">|</span>
        <div class="width-80">已选{{multipleSelection.length}}项</div>
        <el-button v-if="selectStatus == 0" @click="handleBatchSelect" type="primary">批量添加</el-button>
        <el-button v-if="selectStatus == 1" @click="handleBatchRemove" type="primary">批量移除</el-button>
        <span class="pad-l-20 font-gray">当前合计{{memberIds.length}}人</span>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table ref="multipleTable" :data="dataList" v-loading="listLoading" @selection-change="handleSelectionChange"
          element-loading-text="加载中" style="width: 100%">
          <el-table-column width="50px" type="selection"></el-table-column>
          <el-table-column label="微客信息" width="650px">
            <template slot-scope="scope">
              <div class="flex v-align-c cursor-p">
                <label><img :src="scope.row.avatar" class="user-avatar"></label>
                <div class="font-14 pad-l-10">
                  <div><span class="font-color-9">昵称：</span>{{scope.row.nickname}}</div>
                  <div>
                    <span class="font-gray">手机：{{scope.row.phone}}</span>
                  </div>
                </div>
              </div>
            </template>>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <div class="dialog-footer mar-b-20">
      <el-button type="primary" @click="saveMemberIds">确定</el-button>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .user-avatar {
    width: 68px;
    height: 68px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }

  .category-style {
    color: #3abbdb
  }
</style>

<script>
  import elDragDialog from '@/directive/el-dragDialog'
  import {
    pagingMemberByEnterpriseId
  } from '@/api/user/member'

  export default {
    components: {},
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      memberIds: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        total: null,
        allChecked: false,
        keyword: '',
        keywordType: 'nickname',
        keywordTypes: [{
          value: 'nickname',
          label: '微客昵称'
        }, {
          value: 'phone',
          label: '微客手机号'
        }],
        multipleSelection: [],
        listLoading: true,
        searchListQuery: {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10,
          nickname: '',
          phone: '',
          memberIds: [],
          isSelectMember: '1'
        },
        selectStatus: '1',
        dataList: []
      }
    },
    // 初始化页面
    created() {
      this.initMemberList()
      const that = this
      this.$bus.$on('setMemberIds', function(memberIds) {
        const temp = Array.from(memberIds)
        that.memberIds.splice(0, that.memberIds.length)
        temp.forEach(memberId => {
          that.memberIds.push(memberId)
        })
        that.initMemberList()
      })
    },
    filters: {},
    mounted() {},
    methods: {
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initMemberList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initMemberList()
      },
      selectAll() {
        if (this.multipleSelection.length === 0 || this.multipleSelection.length < this.dataList.length) {
          this.dataList.forEach(item => {
            this.$refs.multipleTable.toggleRowSelection(item, true)
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      },
      // 勾选
      handleSelectionChange(val) {
        this.multipleSelection = val
        if (this.multipleSelection.length === this.dataList.length) {
          this.allChecked = true
        } else {
          this.allChecked = false
        }
      },
      selectStatusClick() {
        this.resetSearch()
      },
      initMemberList() {
        this.listLoading = true
        this.searchListQuery.nickname = ''
        this.searchListQuery.phone = ''
        this.searchListQuery[this.keywordType] = this.keyword
        this.searchListQuery.memberIds = this.memberIds.join(',')
        this.searchListQuery.isSelectMember = this.selectStatus
        pagingMemberByEnterpriseId(this.searchListQuery).then(response => {
          this.total = response.data.total
          this.dataList = response.data.records
          this.listLoading = false
        })
      },
      handleSearch() {
        this.initMemberList()
      },
      resetSearch() {
        this.searchListQuery = {
          currentPage: 1,
          size: 10,
          enterpriseId: this.getEnterpriseId(),
          nickname: '',
          phone: ''
        }
        this.keyword = ''
        this.keywordType = 'nickname'
        this.initMemberList()
      },
      // 批量移除微客
      handleBatchRemove() {
        const that = this
        if (this.multipleSelection.length > 0) {
          const memberIds = this.multipleSelection.map(item => item.memberId)
          if (memberIds.length > 0) {
            memberIds.forEach(memberId => that.memberIds.splice(that.memberIds.findIndex(e => e === memberId), 1))
            this.initMemberList()
          }
        }
      },
      // 批量选择商品
      handleBatchSelect() {
        const that = this
        if (this.multipleSelection.length > 0) {
          const memberIds = this.multipleSelection.map(item => item.memberId)
          memberIds.forEach(memberId => that.memberIds.push(memberId))
          this.initMemberList()
        }
      },
      // 确定选择商品
      saveMemberIds() {
        this.$emit('saveMemberIds', this.memberIds)
        this.selectStatus = '1'
        this.resetSearch()
      }
    }
  }
</script>
